<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>侦听属性</title>
</head>

<body>
    <div id="app">
        <label>FirstName: </label><input type="text" v-model="firstName"> <br>
        <label>LastName: </label><input type="text" v-model="lastName"> <br>
        <label>FullName: </label><span>{{ fullName }}</span>
    </div>

    <script type="module">
        import Vue from '../vue.esm.browser.js'

        const app = new Vue({
            el: '#app',
            data: {
                firstName: 'Foo',
                lastName: 'Bar', 
                fullName: 'Foo Bar',
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })
    </script>
</body>

</html>